<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <table>
            <tr>
                <td>手机号</td>
                <td><input type="text" class="num"></td>
                <td></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td><input type="text" class="email"></td>
                <td></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" class="pwd"></td>
                <td></td>
            </tr>
            <tr>
                <td><input type="button" value="注册" disabled class="regist"></td>
            </tr>
        </table>
    </form>
    <script>
        var flag1 = flag2 = flag3 = false;
        document.querySelector(".num").onblur = function () {
            var value = this.value;
            if (/^1[3-9]\d{9}$/.test(value)) {
                this.parentElement.nextElementSibling.innerHTML= '<span style="color:green">√<span>';
                    flag1 = true;
            }else{
                this.parentElement.nextElementSibling.innerHTML = '<span style="color:red">×<span>';
                    flag1 = false;
            }
            changeStatus()
        }
        document.querySelector(".email").onblur = function () {
            var value = this.value;
            if (/\w{3,24}\@(163|qq)\.(com|cn)$/.test(value)) {
                this.parentElement.nextElementSibling.innerHTML= '<span style="color:green">√<span>';
                    flag2 = true;
            }else{
                this.parentElement.nextElementSibling.innerHTML = '<span style="color:red">×<span>';
                    flag2 = false;
            }
            changeStatus()
        }
        document.querySelector(".pwd").onblur = function () {
            var value = this.value;
          if(value.length>=6){
            this.parentElement.nextElementSibling.innerHTML= '<span style="color:green">√<span>';
                flag3 = true;
          }else{
            this.parentElement.nextElementSibling.innerHTML = '<span style="color:red">×<span>';
                flag3 = false;
          }
          changeStatus()
        }
        function changeStatus(){
        var btn = document.querySelector('.regist');
        (flag3 && flag2 && flag1) ? (btn.disabled = false) :(btn.disabled = true)
    }
    </script>
</body>

</html>